<template>
<transition name="el-fade-in-linear">
  <!-- Start Main content -->
  <main class="bg-grey pt-80 pb-50">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xl-6 col-md-10">
          <div class="
              login_wrap
              widget-taber-content
              p-30
              bg-white
              border-radius-10
            ">
            <div class="padding_eight_all bg-white">
              <div class="heading_s1 text-center">
                <h3 class="mb-30 font-weight-900">找回密码</h3>
              </div>
              <form method="post">

                <div class="form-group">
                  <input type="text"
                         required=""
                         class="form-control"
                         name="email"
                         placeholder="您的邮箱"
                         v-model="user.username" />
                </div>

                <div class="form-group">
                  <input class="form-control"
                         required=""
                         type="password"
                         name="password"
                         placeholder="重置密码"
                         v-model="user.password" />
                </div>

                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input class="form-control"
                             name="name"
                             id="name"
                             type="text"
                             placeholder="验证码"
                             v-model="code">
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <button style="border:none; border-radius:25px;"
                        class="btn button-contactForm btn-block bg-info"
                              :disabled="isSend"
                              @click="countDown">
                        {{codeName}}
                      </button>
                    </div>
                  </div>
                </div>
                <div class="login_footer form-group">
                  <div class="chek-form">
                    <div class="custome-checkbox">
                      <input class="form-check-input"
                             type="checkbox"
                             name="checkbox"
                             id="exampleCheckbox1"
                             value="" />
                    </div>
                  </div>
                  <router-link to="login"
                               class="text-muted"
                               href="#">我又想起来了,立即登录?</router-link>
                </div>
                <loading :loading="hasLoading"></loading>
                <div class="form-group"
                     v-if="!hasLoading">
                  <button type="submit"
                          style="border:none; border-radius:25px;"
                        class="btn button-contactForm btn-block bg-info"
                          @click="reset()">
                    重置密码
                  </button>
                </div>
              </form>
              <div class="divider-text-center mt-15 mb-15">
                <span>{{ hasLoading ? "正在重置" : "第三方登录" }}</span>
              </div>
              <div class="flex-c-m" v-if="!hasLoading">
                <a href="#" class="login100-social-item bg1">
                  <svg class="Zi Zi--WeChat Login-socialIcon" fill="#fff" viewBox="0 0 24 24" width="40" height="40">
                    <path
                      d="M2.224 21.667s4.24-1.825 4.788-2.056C15.029 23.141 22 17.714 22 11.898 22 6.984 17.523 3 12 3S2 6.984 2 11.898c0 1.86.64 3.585 1.737 5.013-.274.833-1.513 4.756-1.513 4.756zm5.943-9.707c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272zm7.583 0c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272z"
                      fill-rule="evenodd"></path>
                  </svg>
                </a>

                <a href="#" class="login100-social-item bg2">
                  <svg class="Zi Zi--QQ Login-socialIcon" fill="#fff" viewBox="0 0 24 24" width="40" height="40">
                    <path
                      d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.287.687 6.287 0 0-.688-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z"
                      fill-rule="evenodd"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</transition>
  <!-- End Main content -->
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import Loading from '@/components/loading'
import bus from '../utils/bus.js'
let Base64 = require('js-base64').Base64

export default {
  components: {
    Loading,
  },
  // 定义属性
  data () {
    return {
      show:true,
      isSend: false, //禁用
      codeName: '发送验证码',
      totalTime: 60, //一般是60
      timer: '', //定时器
      hasLoading: false,
      code: '',
      user: {
        username: '',
        password: '',
      },
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getCode () {
      const pram = {
        username: this.user.username,
        id:0
      }
      this.$api.blog.getCode(pram)
    },
    // 验证码倒计时
    countDown () {
      if (this.$commons.isEmptyString(this.user.username)) {
        Notiflix.Report.Info('提示', '请完整填写您的邮箱，以便继续流程', '好的');
      }
      if (!this.$commons.validateEmail(this.user.username)) {
        Notiflix.Report.Info( '提示', '邮箱地址有误', '好的' );
        return;
      }
      if (this.isSend) return
      this.getCode() // 获取验证码的接口
      this.isSend = true
      this.codeName = this.totalTime + 's后重新发送'
      this.timer = setInterval(() => {
        this.totalTime--
        this.codeName = this.totalTime + 's后重新发送'
        if (this.totalTime < 0) {
          clearInterval(this.timer)
          this.codeName = '重新发送验证码'
          this.totalTime = 60
          this.isSend = false
        }
      }, 1000)
    },
    async reset () {
      if (this.$commons.isEmptyString(this.user.username)) {
        Notiflix.Report.Info('提示', '请完整填写您的邮箱，以便继续流程', '好的');
      }
      if (this.$commons.isEmptyString(this.user.password)) {
        Notiflix.Report.Info('提示', '请填写完整您的密码，以便继续流程', '好的')
        return
      }
      if (this.$commons.isEmptyString(this.code)) {
        Notiflix.Notify.Info('请输入验证码')
        return
      }

      // 重置
      this.hasLoading = true
      const pram = {
          username: this.user.username,
          // 加密 this.Rsa.rsaPublicData(this.user.password)
          password: this.Rsa.encrypt(this.user.password),
          id: this.code
      }
      // 重置结果
      var res = await this.$api.user.reset(pram)
      this.hasLoading = false
      if (res.code != 20000) {
        // 恢复操作
        return
      }
      this.$store.commit('SET_TOKEN', res.data.token)
      this.$store.commit('SET_USER', res.data.user)
      this.$store.commit('SET_PASSWORD', this.user.password)
      this.$router.push({ name: 'user' })
    },
    showMain() {
        // 监听事件
        bus.$on('showMain', res => {
          if (res.name == 'router') {
            this.show = res.data;
            this.$forceUpdate()
          }

        })
      }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { 
    this.showMain();
  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style>
.flex-c-m {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
}
.login100-social-item {
  font-size: 25px;
  color: #fff;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 5px;
}

.login100-social-item:hover {
  color: #fff;
  background-color: #333333;
}
.bg1 {
  background-color: #0a8f32;
}
.bg2 {
  background-color: #1da1f2;
}
.bg3 {
  background-color: #ea4335;
}
</style>
